<template>
    <div>
        <div class="tip" v-if="type == 'filter'">
            <el-input v-for="(value, key, index) in listFields" v-model="queryData[key]" :placeholder="value" :key="index" @change="queryHandle($event,key)"></el-input>
        </div>

        <div class="interspaceH" v-if="type == 'filter'"></div>

        <el-table ref="multipleTable" :data="listData" border style="width: 100%" :header-cell-style="{background:'#F3F4F7',color:'#555'}">
            <el-table-column v-for="(value, key, index) in listFields" :prop="key" :label="value" :key="index"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="rowChange(scope.row)" type="text" size="small">选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="interspaceH"></div>

        <el-pagination @size-change="pageHandle(pagePagination.currentPage,$event)"
                       @current-change="pageHandle($event,pagePagination.pageSize)"
                       :current-page="pagePagination.currentPage"
                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                       layout="total, sizes, prev, pager, next"
                       :total="dataSource.length">
        </el-pagination>
    </div>
</template>

<script>
/**
 * queryData 查询字段及名称  name:名称
 * dataSource 列表数据
 * listFields 列表显示的字段 name:名称
 * type 默认不显示查询  1、filter过滤  2、接口过滤
 * url type != default && type != filter 需要传入url
 */
export default {
    name: "list_select",
    props: {
        queryData: {
            type: Object,
            default() {
                return {};
            }
        },
        dataSource: {
            type: Array,
            default: () => []
        },
        listFields: {
            type: Object,
            default() {
                return {};
            }
        },
        type: {
            type: String,
            default: 'default'
        },
        url: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            multipleSelection:[],
            listData:[],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        this.pageHandle()
    },
    methods: {
        pageHandle(page = 1, rows = 10) {
            let that = this
            let data = [...that.dataSource]
            that.pagePagination['currentPage'] = page
            that.pagePagination['pageSize'] = rows
            let length = that.dataSource.length
            that.listData = data.splice((page - 1) * rows, page * rows > length ? length - (page - 1) * rows : rows)
        },
        queryHandle(e, key) {
            let that = this
            let dataSource = that.dataSource
            that.listData = []

            if (e == null || e == '') {
                that.listData = dataSource
                return
            }

            if (this.type == 'filter') {
                this.dataSource.filter(item => {
                    return item[key] == e ? that.listData.push(item):[]
                })
            } else if (this.type == 'url'){

            }
        },
        rowChange(row) {
            this.$emit("getData", row)
        }
    }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}
</style>
